import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import { Mark } from '@tiptap/core'

// 自定义高亮 Mark
const BlueHighlight = Mark.create({
  name: 'blueHighlight',

  parseHTML() {
    return [
      {
        tag: 'span[data-blue-highlight]'
      }
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return [
      'span',
      {
        ...HTMLAttributes,
        'data-blue-highlight': 'true',
        style: 'background-color: #3b82f6; color: white; padding: 2px 6px; border-radius: 3px; font-weight: bold;'
      }
    ]
  },

  addCommands() {
    return {
      setBlueHighlight:
        () =>
        ({ commands }) => {
          return commands.setMark(this.name)
        }
    }
  }
})

const TiptapEditorWithMark = () => {
  const editor = useEditor({
    extensions: [StarterKit, BlueHighlight],
    content: `
      <p>
        <span data-blue-highlight="true" style="background-color: #3b82f6; color: white; padding: 2px 6px; border-radius: 3px; font-weight: bold;">AI编程</span>
        这里是编辑器的其他内容...
      </p>
    `
  })

  return (
    <div className="editor-container" style={{ border: '1px solid #ccc', borderRadius: '8px', padding: '16px' }}>
      <EditorContent editor={editor} />
    </div>
  )
}

export default TiptapEditorWithMark
